<template>
   <div class="hotsell">
     <header>
        <span style="line-height: 60px;">热销榜配置</span> 
         <el-button  style="float: right;">返回</el-button>
        <el-button style="float: right;">刷新</el-button>
     </header>
  <div class="shang">
    <h5>数据筛选</h5>
    <el-form style="margin-top: 20px;">
        搜索词:<el-input placeholder="用户编号" style="width: 150px; margin: 0 20px;"></el-input>
        <el-button type="primary">查询</el-button>
    </el-form>
  </div>
  <div class="xia">
    <h5>数据列表</h5>
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="name"
      width="120">
      
    </el-table-column>
    <el-table-column
      prop="sort"
      label="排序"
      width="120">
    </el-table-column>
    <el-table-column
      prop="type"
      label="状态"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="beizhu"
      label="备注"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <button style="margin-top: 10px;">全选</button>
  <button>反选</button>
  <el-select style="width: 150px;"></el-select>

  <!-- 分页 -->

  <el-pagination
  style="float: right;"
  background
  layout="prev, pager, next,sizes"
  :total="1000"
  :page-size="100"
  :page-sizes="[100, 200, 300, 400]">
</el-pagination>
  </div>
 
   </div>
</template>
<script>
export default {
   name: 'hotsell',
   components: {
     
   },
   mixins: [],
   props: {
     
   },
   data() {
     return {
        
        tableData: [
            {
            name:'党参',
          sort: '1',
          type: '正常',
          beizhu: '----'
        }, 
        {
            name:'党参',
          sort: '1',
          type: '正常',
          beizhu: '----'
        }, 
        {
            name:'党参',
          sort: '1',
          type: '正常',
          beizhu: '----'
        },  {
            name:'党参',
          sort: '1',
          type: '正常',
          beizhu: '----'
        },  {
            name:'党参',
          sort: '1',
          type: '正常',
          beizhu: '----'
        },  {
            name:'党参',
          sort: '1',
          type: '正常',
          beizhu: '----'
        },  {
            name:'党参',
          sort: '1',
          type: '正常',
          beizhu: '----'
        },  {
            name:'党参',
          sort: '1',
          type: '正常',
          beizhu: '----'
        }, 
    ]
     }
   },
   computed: {
     
   },
   watch: {
     
   },
   mounted() {
     
   },
   methods: {
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
   }
};
</script>
<style lang='scss' scoped>
.hotsell{
width: 1000px;
margin: auto;
background-color: #f3f3f3;
height: 100%;
}
header{
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #f5f5f5;

}
.shang{
    width: 800px;
    margin: auto;
    height: 120px;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;

}
.xia{
    background-color: #fff;
    width: 800px;
    margin: auto;
    padding: 20px;
    


}
h5{
    border-bottom: 1px solid #f5f5f5;
    height: 60px;
    line-height: 60px;
}
</style>